<%--
  Created by IntelliJ IDEA.
  User: Mr_C
  Date: 2017/3/13
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <%--<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">--%>
    <%--<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>--%>
    <%--<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
    <script src="${ctx}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <style type="text/css">
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }
        .apdText{
            font-size: 20px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            //加载系统模板
            $.ajax({
                url: '${ctx}/office/getOfficeDetail',
                type: 'POST',
                data:{
                    office_id:'${office_id}'
                },
                dataType: 'json',
                success: function(responseText) {
                    //此处加载各种科室信息
                    $("#jumtitle").append("<h1>"+"<br/>"+responseText.office_name+"</h1>")
                    $("#section-1").append("<p class='apdText'>"+"<br/>"+responseText.office_name+"</p>")
                    $("#section-2").append("<p class='apdText'>"+"<br/>"+responseText.discription+"</p>")

                    //加载相关人员
                    for(var i=0; i<responseText.relevant_person_count; i++){
                        $("#section-3").append("<p class='apdText'>"+"<br/>"+responseText.relevant_person[i]+"</p>")
                    }

                    //加载图片
                    for(var i=0; i<responseText.pic_loc_count; i++){
                        if(i==0) {
                            //加载图片下方控制点
                            $("#office_picture_carousel").append("<li data-target=\"#office_picture\" data-slide-to=\"0\" class=\"active\"></li>")
                            //加载图片内容
                            $("#office_picture_inner").append("<div class=\"item active\">\n"+
                                    "<img src=\"${vtx}"+responseText.pic_loc[i]+"\" alt=\""+i+"\">\n"+
                                    "</div>");
                        }else{
                            $("#office_picture_carousel").append("<li data-target=\"#office_picture\" data-slide-to=\""+i+"\"></li>")
                            $("#office_picture_inner").append("<div class=\"item\">\n"+
                                    "<img src=\"${vtx}"+responseText.pic_loc[i]+"\" alt=\""+i+"\">\n"+
                                    "</div>");
                        }
                    }

                }
            });
        });
    </script>
    <script type="text/javascript">
        function Fullscreen(id){
            window.open( '${ctx}/vtour/tour.html');
        }
        </script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="jumbotron" id="jumtitle">
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">科室名称</a></li>
                <li><a href="#section-2">科室简介</a></li>
                <li><a href="#section-3">科室相关职业</a></li>
                <li><a href="#section-4">科室图片展览</a></li>
                <li><a href="#section-5">全景导览</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1">科室名称</h2>
            <hr>
            <h2 id="section-2">科室简介</h2>
            <hr>
            <h2 id="section-3">科室相关职业</h2>
            <hr>
            <h2 id="section-4">科室图片展览</h2>
            <div id="office_picture" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators" id="office_picture_carousel">
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner" id="office_picture_inner">
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#office_picture" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#office_picture" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>

            </div>
            <hr>
            <h2 id="section-5">全景导览</h2>
            <button type="button" class="btn btn-primary" onclick="Fullscreen(1)">进入全景导览</button>
            <hr>
        </div>
    </div>
</div>
</body>
</html>
